<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

<div id="app">
  <ul>
    <!-- 1. 在遍历对象的过程中, 如果只是获取一个值, 获取到的为value -->
    <li v-for="value in info">{{value}}</li>


    <hr>

    <!-- 2. 获取 key value 格式为 (value, key) -->
    <li v-for="(value, key) in info">{{key}} = {{value}}</li>

    <hr>
    
    <!-- 3. 获取 key value index 格式为 (value, key, index) -->
    <li v-for="(value, key, index) in info">{{index}}.{{key}} = {{value}}</li>
    
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue(
    {
      el: '#app',
      data:
      {
        info:
        {
          name: 'chen',
          age: 18,
          height: 1.8,
        }
      }
    }
  )
</script>
  
</body>
</html>